import React, { Component } from 'react'
import './index.less'
import { Card, Button, Modal } from 'antd'
export default class Buttons extends Component {
    state={
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false,
    }
    handleOpen=(type)=>{
        this.setState({
            [type]: true
        })
    }
    handleConfirm = (type) => {
        Modal[type]({
            title:"确认",
            content:'this is some text ',
            onOk(){
                console.log('OK')
            },
            onCancel(){
                console.log("cancel")
            }
        })
    }
    render(){
        return (
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => { this.handleOpen('showModal1')}}>Open</Button>
                    <Button type="primary" onClick={() => { this.handleOpen('showModal2') }}>自定义页脚</Button>
                    <Button type="primary" onClick={() => { this.handleOpen('showModal3') }}>top:20px;</Button>
                    <Button type="primary" onClick={() => { this.handleOpen('showModal4') }}>水平垂直居中</Button>
                </Card>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => { this.handleConfirm('confirm') }}>Confirm</Button>
                    <Button type="primary" onClick={() => { this.handleConfirm('info') }}>Info</Button>
                    <Button type="primary" onClick={() => { this.handleConfirm('success') }}>Success</Button>
                    <Button type="primary" onClick={() => { this.handleConfirm('warning') }}>Warning</Button>
                </Card>
                <Modal 
                    title ="React"
                    visible={this.state.showModal1}
                    onCancel={()=>{this.setState({showModal1:false})}}
                >
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem vero cumque facilis, animi quam, non incidunt repellat aperiam, modi neque ullam officia voluptatum veniam est maxime alias esse molestias accusamus.</p>
                </Modal>
                <Modal
                    title="React"
                    okText="确定"
                    cancelText="算了"
                    visible={this.state.showModal2}
                    onCancel={() => { this.setState({ showModal2: false }) }}
                >
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </Modal>
                <Modal
                    style={{top:20}}
                    title="React"
                    okText="确定"
                    cancelText="算了"
                    visible={this.state.showModal3}
                    onCancel={() => { this.setState({ showModal3: false }) }}
                >
                    <p>Lorem ipsum dolor sit a</p>
                </Modal>
                <Modal
                    style={{ top: 20 }}
                    //modal外面的 容器的class 这个class是自定义样式
                    wrapClassName="vertical-center-modal"
                    title="React"
                    okText="确定"
                    cancelText="算了"
                    visible={this.state.showModal4}
                    onCancel={() => { this.setState({ showModal4: false }) }}
                >
                    <p>Lorem ipsum dolor sit a</p>
                </Modal>
            </div>
        );

    }
}